<template>
	<div class="homecontent">
		<h2>Hot Bids</h2>
		<HotBids />
		<Divider />
		<div class="flex sa">
			<h2>Explore</h2>
			<Button shape="circle" icon="ios-search">Search</Button>
			<Button shape="circle" icon="ios-search">Search</Button>
			<Button shape="circle" icon="ios-search">Search</Button>
			<Button shape="circle" icon="ios-search">Search</Button>
			<Button shape="circle" icon="ios-search">Search</Button>
			<Button shape="circle" icon="ios-search">Search</Button>
			<Button shape="circle" icon="ios-search">Search</Button>
			<Button shape="circle" icon="ios-search">Search</Button>
		</div>
		<HotBids />

		<HotBids />

		<HotBids />
	</div>
</template>

<script>
import HotBids from './HotBids.vue';

export default {
	components: {
		HotBids,
	},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.homecontent {
	padding: 20px;
	overflow: scroll;
	height: 100vh;
}
</style>
